import React, { useState } from 'react';
import {
  Input, Form, Select, Cascader,
} from 'antd';
import keys from 'lodash/fp/keys';

const { Option } = Select;
const paramStyle = {
  width: '70%',
};
const mapInToSource = {
  args: 'literal',
  input: 'taskOutput',
};

/**
 * props: {
 *    param: {
 *      label: string,
 *      name: string,
 *      description: string
 *    },
 *    getFieldDecorator: function
 *    taskOutput: {
 *      [taskId: str]: string[]   // output data of all configured task
 *    }
 * }
 */
export default function ParamFormItem({
  param, getFieldDecorator, taskOutput, defaults,
}) {
  const cascaderOptions = keys(taskOutput).map((key) => ({
    value: key,
    label: key,
    children: taskOutput[key].map((item) => ({
      value: item,
      label: item,
    })),
  }));
  // TODO: make this aware of param type
  const item = (source) => {
    if (defaults) {
      if (defaults.in === 'args') {
        return getFieldDecorator(`params['args']['${param.name}']`, {
          validateTrigger: ['onChange', 'onBlur'],
          initialValue: defaults.value,
          rules: [
            {
              required: true,
              whitespace: true,
              message: `请输入${param.label}!`,
            },
          ],
        })(<Input placeholder={param.description} style={paramStyle} />);
      }
      // in input
      return getFieldDecorator(`params['input']['${param.name}']`, {
        initialValue: defaults.value,
        rules: [
          {
            type: 'array',
            required: true,
            message: `请输入${param.label}!`,
          },
        ],
      })(<Cascader
        placeholder={param.description}
        options={cascaderOptions}
        style={paramStyle}
      />);
    }
    switch (source) {
      case 'taskOutput':
        return getFieldDecorator(`params['input']['${param.name}']`, {
          initialValue: [],
          rules: [
            {
              type: 'array',
              required: true,
              message: `请输入${param.label}!`,
            },
          ],
        })(<Cascader
          placeholder={param.description}
          options={cascaderOptions}
          style={paramStyle}
        />);
      case 'literal':
      default:
        // as literal
        return getFieldDecorator(`params['args']['${param.name}']`, {
          validateTrigger: ['onChange', 'onBlur'],
          rules: [
            {
              required: true,
              whitespace: true,
              message: `请输入${param.label}!`,
            },
          ],
        })(<Input placeholder={param.description} style={paramStyle} />);
    }
  };
  const defaultSource = defaults ? mapInToSource[defaults.in] : 'literal';
  const [source, setSource] = useState(defaultSource);
  return (
    <Form.Item key={param.name} label={param.label}>
      {item(source)}
      <Select onChange={(value) => setSource(value)} style={{ width: '30%' }} defaultValue={defaultSource}>
        <Option key="literal">字面量</Option>
        <Option key="taskOutput">其他任务输出</Option>
      </Select>
    </Form.Item>
  );
}
